<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>004</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				width: 700px;
				height: 400px;
				margin: 50px auto;
				border: 1px solid blue;
			}
			ul li {
				width: 100px;
				height: 100%;
				float: left;
				list-style: none;
				border-right: 1px solid blue;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<audio id="audio" autoplay="autoplay"></audio>
		
		
		<script type="text/javascript">
			//获取元素
			var lis = document.getElementsByTagName("li");
			var audio = document.getElementById("audio");
			
			//添加onkeydown事件，键盘按下
			document.onkeydown = function(e) {
				//获取用户按下的字符
				console.log(e.key);
				
				//使用switch条件分支语句
				switch (e.key){
					case "1":
					case "2":
					case "3":
					case "4":
					case "5":
					case "6":
					case "7":
						lis[e.key - 1].style.backgroundColor = "orange";
						//每个键具有不同的声音
						//audio.src = "../audio/" + e.key +".mp3";
						//每个键具有相同的声音
						audio.src = "../audio/audio_01.ogg";
						break;
					default:
						console.log("你按错啦");
						break;
				}
			}
			
			//添加onkeyup事件，键盘抬起
			document.onkeyup = function(e) {
				switch (e.key){
					case "1":
					case "2":
					case "3":
					case "4":
					case "5":
					case "6":
					case "7":
					lis[e.key - 1].style.backgroundColor = "white";
						break;
					default:
						console.log("你按错啦");
						break;
				}
			}
			
		</script>
	</body>
</html>
